<template>
	<view>
		<view class="index-top"></view>
		<view style="position: relative; z-index: 1" class="dis-flex-column">
			<view class="mt30 px30">
				<view class="c-000 fw400 fs40">Hey</view>
				<view class="mt30 c-000 fs20">欢迎加入大楚玖胜</view>
				<view class="mt50 bb-999 dis-flex flex-align-center px10" style="height: 100rpx">
					<u-input placeholder="请输入手机号" placeholderStyle="color:#999;" border="none" v-model="userName" :clearable="true" :maxlength="11" type="number">
						<template slot="prefix">
							<u-icon name="phone" custom-prefix="custom-icon" size="34"></u-icon>
						</template>
					</u-input>
				</view>
				<view class="mt10 bb-999 dis-flex flex-align-center px10" style="height: 100rpx">
					<u-input placeholder="请输入验证码" placeholderStyle="color:#999;" border="none" v-model="smsCode" :clearable="true" :maxlength="4" type="number">
						<template slot="prefix">
							<u-icon slot="icon" name="yanzhengma" custom-prefix="custom-icon" size="34"></u-icon>
						</template>
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<view class="c-common fs14" @tap="$u.throttle(getCode, 1000)">{{ codeText }}</view>
						</template>
					</u-input>
				</view>
				<view class="dis-flex-column flex-align-center mt80">
					<u-image src="/static/images/logo.png" width="550" height="450" style="margin-top: -60rpx"></u-image>
				</view>
				
				
				<view style="display: flex;align-items: center;margin-top: 110rpx;">
					<checkbox-group @change="isAgreement">
						<label>
							<checkbox value="1" style="transform:scale(0.7)" />
						</label>
					</checkbox-group>
					<view class="inline-block ml-10" style="font-size: 25rpx;">我已阅读并同意
						<text @click="showAgreementHandle(1)" style="font-size: 25rpx;color:blueviolet;">《用户服务协议》、</text>
						<text @click="showAgreementHandle(2)" style="font-size: 25rpx;color:blueviolet;">《隐私协议》</text>
					</view>
				</view>
				
				
			</view>
		</view>
		<view class="pos-fix wd100 dis-flex flex-align-center bg-common" style="left: 0rpx; bottom: 0rpx; height: 150rpx">
			<view class="dis-flex flex-align-center px16 wd100">
				<button class="btn-submit c-fff wd100" style="background: #4a94e6" @tap="phoneSubmit" :loading="loginLoading">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
import validate from '@/common/thformvalidate';

export default {
	data() {
		return {
			userName: '', //手机号
			smsCode: '', //短信验证码
			current: 1,
			codeText: '发送验证码',
			loginLoading: false,
			uid: '',
			status:0
			
		};
	},
	onLoad(option) {
		this.uid = option.uid || '';
		const userName = uni.getStorageSync('username');
		if (userName) this.userName = userName;
	},

	methods: {
		//倒计时更新
		codeChange(text) {
			this.codeText = text;
		},
		
		
		showAgreementHandle(num){
			if(num == 1){
				window.open('https://www.shdcjs.cn/info.html')
			}else{
				window.open('https://www.shdcjs.cn/yinsi.html')
			}
		},
		
		
		isAgreement(res){
			this.status = res.detail.value.length
		},

		//获取短信验证码
		getCode() {
			if (!this.$refs.uCode.canGetCode) {
				this.$u.toast('倒计时结束后再发送');
				return;
			}
			//定义表单规则
			var rule = [
				{
					name: 'mobile',
					notnull: true,
					checkType: 'phone',
					title: '手机号'
				}
			];
			var formData = {
				mobile: this.userName
			};
			if (!validate.check(formData, rule)) return;
			uni.showLoading({
				title: '正在获取验证码'
			});
			this.$http
				.post(
					this.$config.UrlSendMessage,
					{
						mobile: this.userName,
						event: 'mobilelogin'
					},
					{
						header: {
							'content-type': 'application/json'
						}
					}
				)
				.then(res => {
					if (res.code == 1) {
						this.$refs.uCode.start();
					} else this.$api.alert(res.msg);
				})
				.finally(res => {
					uni.hideLoading();
				});
		},

		/**
		 * 手机号登录
		 */
		phoneSubmit() {
			
			
			var rule = [
				{
					name: 'mobile',
					notnull: true,
					checkType: 'phone',
					title: '手机号'
				},
				{
					name: 'captcha',
					notnull: true,
					checkType: '',
					title: '验证码'
				}
			];
			var formData = {
				mobile: this.userName,
				captcha: this.smsCode
			};
			if (!validate.check(formData, rule)) return;
			
			
			if(!this.status){
				return uni.showToast({
					title:'请先勾选用户协议',
					icon:'none'
				})
			}
			
			if (this.uid) {
				formData.uid = this.uid;
			}
			this.loginLoading = true;
			this.$http
				.post(this.$config.UrlLogin, formData, {
					log: true,
					header: {
						'content-type': 'application/json'
					}
				})
				.then(res => {
					if (res.code == 1) {
						if (formData.mobile) uni.setStorageSync('username', formData.mobile);
						if (res?.data?.userinfo?.token) uni.setStorageSync('login_atk', res?.data?.userinfo?.token);
						getApp().loadUserInfo();
						if (res?.data?.role_id == 2) {
							//1.员工   2.用户
							this.$api.openWindow('/pages/tabbar/middleUser', 'redirectTo');
						} else {
							this.$api.openWindow('/pages/tabbar/middle', 'switchTab');
						}
					} else this.$api.toast(res.msg);
				})
				.finally(res => {
					this.loginLoading = false;
				});
		}
	}
};
</script>

<style>
.index-top {
	width: 100%;
	height: 100%;
	background-image: url(~@/static/images/login-bg.png);
	background-size: 100% 100%;
	position: fixed;
	top: 0rpx;
}
.login-logo {
	width: 100%;
	margin: 80rpx 0 0 0;
}

.login-logo image {
	width: 408rpx;
	height: 249rpx;
}
</style>
